<template>
  <view>
    <view class="tabs_title" :class="tabsFixed ? 'tabs_fixed' : ''">
      <view
        class="tabs_item"
        :class="item.isActive ? 'active' : ''"
        v-for="(item, index) in tabs"
        :key="index"
        @click="handleItemTap(index)"
      >
        {{ item.value }}
      </view>
    </view>
    <view class="tabs_content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    tabs: {
      type: Array,
      default: [],
    },
    tabsFixed: {
      type: Boolean,
      default: false,
    },
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {
    handleItemTap(index) {
      this.$emit("tabsItemTap", index);
    },
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.tabs_title {
  display: flex;
  background-color: #fff;

  .tabs_item {
    flex: 1;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-weight: bold;
    font-size: 28rpx;
  }

  .active {
    color: #666ee8;
    border-bottom: 8rpx #666ee8 solid;
  }

  .tabs_fixed {
    position: fixed;
    width: 100%;
    z-index: 10;
  }
}
</style>
